<template>
    <van-search v-model="searchval" show-action label="地址" placeholder="请输入搜索关键词" @search="onSearch">
        <template #action>
            <div @click="onClickButton">搜索</div>
        </template>
    </van-search>
    <div v-for="item in searchApiData" v-show="kong">
        <van-card :price="item.goods_price" :title="item.goods_name"
            :thumb="item.goods_small_logo ? item.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'" />
    </div>
    <van-empty description="搜索数据为空" v-show="kongstatus" />
</template>

<script setup>
import _ from 'lodash';
import { ref, watch } from 'vue';
let searchval = ref('')
import { searchApi } from '@/api/api';
let searchApiData = ref([])
let kongstatus = ref(false)
let kong=ref(false)
watch(searchval, _.debounce(val => {
    if (val.length > 0) {
        kong.value=true
        searchApi(val).then(res => {
            searchApiData.value = res.data.message.goods
            if (res.data.message.total == 0) {
                kongstatus.value = true
            } else {
                kongstatus.value = false
            }
        })
    }else{
        kong.value=false
    }
}, 2000))
</script>

<style lang="scss" scoped></style>